<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from '../../service/request/axios'
import yinyao from './yinyao.mp3'

import { useStore } from 'vuex'
const ruleFormRef = ref()
const loading = ref(false)
const store = useStore()
const ruleForm = reactive({
    userName: '',
    password: '',
    valiCode: '',
    key: ''
})
const rules = reactive({
    userName: [
        {
            required: true,
            message: '请输入账号',
            trigger: 'change'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'change'
        }
    ],
    valiCode: [
        {
            required: true,
            message: '请输入验证码',
            trigger: 'change'
        }
    ]
})
const img = ref('')
const router = useRouter()
//初始化
onMounted(() => {
    getCaptcha()
    playNotificationSound()
})
function playNotificationSound() {
    var audio = document.createElement('AUDIO')
    audio.setAttribute('src', yinyao)
    audio.play()
}

// 登录
const onLogin = (ruleFormRef) => {
    if (!ruleFormRef) return
    ruleFormRef.validate((valid) => {
        if (valid) {
            loading.value = true
            axios
                .post('/login', ruleForm)
                .then(function (res) {
                    //成功
                    localStorage.setItem('token', res.token)
                    store.commit('setUserInfo', res)
                    router.push('/home')
                }) //请求异常处理
                .catch(function (error) {
                    loading.value = false
                    getCaptcha()
                })
        } else {
            return false
        }
    })
}
//获取验证码
function getCaptcha() {
    axios
        .get('/captcha', {})
        .then(function (res) {
            img.value = `data:image/png;base64,${res.base64}`
            ruleForm.key = res.key
        })
        .catch(function (error) {
            //请求异常处理
            console.log(error)
        })
}
</script>

<template>
    <div class="P-login">
        <img src="./logo.png" class="logo" />
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm">
            <el-form-item label="" prop="userName">
                <el-input v-model="ruleForm.userName" type="userName" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item label="" prop="password">
                <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="" prop="valiCode">
                <el-input
                    v-model="ruleForm.valiCode"
                    placeholder="请输入验证码"
                    @keyup.enter="onLogin(ruleFormRef)"
                >
                    <template #append>
                        <img :src="img" alt="" class="validate-code" @click="getCaptcha" />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    :loading="loading"
                    type="primary"
                    style="width: 100%"
                    @click="onLogin(ruleFormRef)"
                    >登录</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped lang="stylus">
.P-login
    position: absolute
    top: 0
    bottom: 0
    width: 100%
    background: #7adbcb
    .logo
        display: block
        margin: 50px auto 20px
        height: 128px
    .demo-ruleForm
        margin: 0 auto 20px
        width: 300px
        text-align: center
    .validate-code {
        height: 25px;
        width: 86px;
        cursor pointer
    }
    :deep(.el-input-group__append)
        padding: 0
</style>
